<script setup>
import Card from './Card.vue'
import CardTitle from './CardTitle.vue'
import CardEyebrow from './CardEyebrow.vue'
import CardDescription from './CardDescription.vue'
import CardCta from './CardCta.vue'

defineProps({
  title: {
    type: String,
    required: true
  },
  description: {
    type: String,
    required: true
  },
  event: {
    type: String,
    required: true
  },
  cta: {
    type: String,
    required: true
  },
  href: {
    type: String,
    required: true
  }
})
</script>

<template>
  <Card as="article">
    <CardTitle as="h3" :href="href">
      {{ title }}
    </CardTitle>
    <CardEyebrow decorate>
      {{ event }}
    </CardEyebrow>
    <CardDescription>{{ description }}</CardDescription>
    <CardCta>{{ cta }}</CardCta>
  </Card>
</template>
